Установка скрипта «Мультифильтр товаров»

Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.


Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

Первый шаг: активация PHP


Убедитесь, что на вашем сайте активна услуга PHP. Для этого перейдите на главную страницу панели управления и обратите внимание на правую часть страницы. В случае наличия активной услуги вы увидите текст "PHP детали".
– перейдите к следующему шагу установки, PHP-услуга у вас активна. Если такой текст отсутствует, значит услуга PHP отключена или просрочена. Для подключения PHP необходимо оплатить премиум пакет, включающий возможность использования PHP-скриптов, либо заказать данную услугу отдельно.

Второй шаг: загрузка скриптов на FTP PHP


Этап 1. Установка пароля

Если у вас задан пароль к FTP PHP, сразу же переходите к следующему этапу.
Перейдите на главную страницу панели управления вашим сайтом, в правой верхней части нажмите на ссылку «PHP детали».
В открывшемся окне кликните на ссылку: «Пароль не установлен».
Мы попадем на страницу установки пароля на FTP PHP. Заполните поля, продолжайте следовать инструкциям системы.

Этап 2. Подключение к PHP FTP серверу

После установки пароля, скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:
  • Сервер: s2000.ucoz.net
  • Логин (FTP login): введите свой логин, который указан в меню "PHP детали"
  • Пароль: пароль который вы ввели ранее в специальном разделе

После заполнения полей нажмите на кнопку «Быстрое соединение».


Этап 3. Загрузка скриптов на PHP FTP сервер

После успешного подключения вы увидите каталог под именем «scripts» в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему.

Теперь загрузите в этот каталог папку из архива со скриптом «multifilter». Загрузить не составит трудностей, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).
Узнать статус передачи файлов вы можете в окне статуса, которое находится в нижней части программы, там отображаются файлы которые ожидают передачи и те, которые не удалось передать, в частности которые были успешно переданы.

Третий шаг: загрузка изображений на сайт


Перейдите в Панель управления » Файловый менеджер.
В правом верхнем углу кликните на кнопку "Создать папку", введите название папки img.
Кликните на галочку и ура, мы создали папку с нужным именем!:)

Теперь зайдите в созданную папку и загрузите в эту папку все изображения из папки "иконки".

Четвёртый шаг: установка кода


Перейдите в Панель управления » Управление дизайном » Интернет-магазин: Вид товара в каталоге, и оберните весь вид товаров в следующие метки: 
<!--ENTRY$ID$-->

 ... тут вид товара ...

<!--/ENTRY$ID$-->
В то место, что выделено красным цветом – должен быть шаблон вида товаров.
затем сохраните изменения.

Далее перейдите в Панель управления » Управление дизайном » Интернет-магазин: Каталог товаров, и в подходящее место разместите следующий код: 
<?if($MODULE_ID$ == "shop" && ($PAGE_ID$ == "category"))?>
<div class="cssload-container"><div class="cssload-loading"><i></i><i></i></div></div>
<div class="multifilter">
    <div id="slider-price" style="display:none;margin-bottom:30px;"><input type="text" id="default_rangeSlider" name="default_rangeSlider" value=""></div>
    <?if($FILTER_SELECTOR$ && ($PAGE_ID$ != 'allgoods'))?><?$DRAW_BLOCK$('FILTER_SELECTOR','flist')?><?endif?>
    <button class="reset-filters" onclick="resetAll();">Сбросить фильтры</button>
</div>
<style>.multifilter{display:none}</style><script src="/php/multifilter/multifilter.php?cid=$CID$"></script>
<?endif?>
Далее в таблицу стилей разместите код: 
.cssload-container{
 display: block;
 margin:35px auto;
 width:70px;
}
.cssload-loading i{
 width: 35px;
 height: 35px;
 display: inline-block;
 background: rgb(255,89,84);
 border-radius: 50%;
}
.cssload-loading i:nth-child(1){
 animation:cssload-loading-ani1 0.55s ease-in-out infinite;
 -o-animation:cssload-loading-ani1 0.55s ease-in-out infinite;
 -ms-animation:cssload-loading-ani1 0.55s ease-in-out infinite;
 -webkit-animation:cssload-loading-ani1 0.55s ease-in-out infinite;
 -moz-animation:cssload-loading-ani1 0.55s ease-in-out infinite;
}
.cssload-loading i:nth-child(2){
 background: rgb(0,168,206);
 margin-left: -7px;
 animation:cssload-loading-ani1 0.55s ease-in-out 0.275s infinite;
 -o-animation:cssload-loading-ani1 0.55s ease-in-out 0.275s infinite;
 -ms-animation:cssload-loading-ani1 0.55s ease-in-out 0.275s infinite;
 -webkit-animation:cssload-loading-ani1 0.55s ease-in-out 0.275s infinite;
 -moz-animation:cssload-loading-ani1 0.55s ease-in-out 0.275s infinite;
}
@keyframes cssload-loading-ani1{
 70%{
 transform:scale(0.5);
 }
}
@-o-keyframes cssload-loading-ani1{
 70%{
 -o-transform:scale(0.5);
 }
}
@-ms-keyframes cssload-loading-ani1{
 70%{
 -ms-transform:scale(0.5);
 }
}
@-webkit-keyframes cssload-loading-ani1{
 70%{
 -webkit-transform:scale(0.5);
 }
}
@-moz-keyframes cssload-loading-ani1{
 70%{
 -moz-transform:scale(0.5);
 }
}
Скрипт мультифильтра работает только на странице категории в шаблоне «Каталог товаров».

Пятый шаг: настройка и использование


Вся настройка и управление происходит в конфиг-файле config.php, который мы загружали на FTP PHP вместе с папкой «multifilter». Давайте рассмотрим настройки детально.

    ВАЖНАЯ НАСТРОЙКА:
  • ftp_login – FTP-логин вашего сайта, это обязательная настройка для корректной работы скрипта. Найти свой FTP логин вы можете перейдя на главную страницу панели управления, кликнув на ссылку FTP детали, которая расположена по правой стороне, в открывшемся окне вы увидите FTP login, а напротив него и будет его нужный нам логин.
  • entries – количество товаров на страницу каталога, которое должно совпадать со значением в панели управления (либо оно должно совпадать по факту. То есть если у вас стилизованный вид товаров, и в каталоге выводится всего три товара, в настройках нужно указать число 3).
  • cols – функция по регулированию вывода товаров табличной версткой или блочной версткой. Принимает значения "1" – включить отображение товаров таблично (<table>), или "2" – включить отображение товаров поблочно (<div>).
    • Табличный вариант (значение "1") вполне подойдет новичкам или тем, кто не редактировал внешний вид отображения товаров.
    • cols-w – количество колонок для отображения товара, которое должно совпадать со значением в панели управления
      • Если у вас наблюдаются проблемы с отображением, установите блочный вариант.

    • Блочный вариант (значение "2") поможет вам самостоятельно настроить отображение колонок, также даст возможность посредством CSS устанавливать несколько видов отображения.
      Совместим со скриптом "переключение вида просмотра товаров" — http://uscript.pro/shop/36/item/perekljuchenie-vida-prosmotra-kartochki-tovara.

  • hiddenFilterOne (NEW) – функция по включению\отключению блоков с одним пунктом фильтрации. Принимает значения 0 (отключить настройку) или 1 (включить настройку)

  • toggleFilter – настройка по включению\отключению возможности сворачивания и разворачивания блоков с фильтрами. Принимает значения 0 (отключить настройку) или 1 (включить настройку)

  • hiddenFilter – настройка по включению\отключению возможности сворачиванию блоков в фильтре. Принимает значения 0 (отключить настройку) или 1 (включить настройку)

  • sliderPrice – настройка по включению\отключению стилизованного слайдера регулировки цены. Принимает значения 0 (отключить настройку) или 1 (включить настройку)
    • shop-price – поднастройка к выбору варианта дизайна для слайдера цены. Принимает значения от 1 до 5.

      • Первый вариант — значение 1

      Второй вариант — значение 2

      Третий вариант — значение 3

      Четвертый вариант — значение 4

      Пятый вариант — значение 5

    • PRICE-filter – настройка по установке цены в слайдере цены. Указывается значение от 0 (выкл) до 1 (вкл). Стандартно отключено и определяется автоматически в зависимости от категории.
    • MIN-price – поднастройка минимальной цены в слайдере. Указывать цифровые значения слитно, т.е. без пробелов
    • MAX-price – поднастройка максимальной цены в слайдере. Указывать цифровые значения слитно, т.е. без пробелов
    • prefix (NEW) – настройка по установки знака валюты ПЕРЕД ценником. Пример: $5
    • postfix (NEW) – настройка по установки знака валюты ПОСЛЕ ценника. Пример: 5$.

  • checkbox – настройка выбора оформления флажков (чекбоксов). Указывается значение от 1 до 5.

    • Первый вариант — значение 1

    Второй вариант — значение 2

    Третий вариант — значение 3

    Четвертый вариант — значение 4

    Пятый вариант — значение 5

  • iCheck – настройка по включению\отключению плагина iCheck — http://ruseller.com/lessons/les1676/demo/. Принимает значения 0 (отключить настройку) или 1 (включить настройку). При включении функции становятся недоступными для выбора предыдущие варианты чекбоксов, чтобы они были доступны, нужно соответственно отключить iCheck (значение 0).
    • iCheckDesign – поднастройка к выбору стиля чекбоксов. Принимает значения от 1 до 5. Снизу демонстрация в виде изображения.

      Сейчас, в стандартном режиме все изображения имеют один цвет, черный. Если вы желаете изменить на какой-либо другой (в целом, присутствует большой выбор цветов), рекомендуем обратить внимание на сайт где размещен планин iCheck — https://github.com/fronteed/icheck/tree/1.x/skins.

      Первый вариант называется – minimal
      Второй — square
      Третий – flat

      У этих трех вариантов присутствуют варианты цветов по ссылке что выше. Особенность их применения – они должны быть также названы идентично и загружены в файловой менеджер в папку img, то есть вы должны просто заменить текущий черный на нужный цвет.


  • scrollBar – настройка по включению\отключению стилизованного скролл-бара. Принимает значения 0 (отключить настройку) или 1 (включить настройку)
    • color-bar – поднастройка к выбору цвета ползунка (скроллбара) в HEX-формате, таблицу цветов вы можете найти перейдя по ссылке: http://www.color-hex.com/. Настройка принимает значение в виде: #2e00c5

  • background – настройка по включению\отключению смены фона блока при выборе опции и ЕСЛИ выбрана опция. Принимает значения 0 (отключить настройку) или 1 (включить настройку)
    • color-background – поднастройка к выбору фона при выборе опции в HEX-формате, таблицу цветов вы можете найти перейдя по ссылке: http://www.color-hex.com/. Настройка принимает значение в виде: #2e00c5

  • all-hide – настройка по включению\отключению пункта "все" в фильтре. Принимает значения 0 (отключить настройку) или 1 (включить настройку)


Настройка модуля "интернет-магазин".

Для корректной работы скрипта, вам нужно выставить соответствующие настройки. Перейдите в Панель управления » Интернет-магазин: Настройки модуля.

1) Убедитесь в том, чтобы у опции «Тип отображения меню фильтрации» было выставлено значение на «Наборы ссылок».

2) Для работы фильтра в требуемых разделах, отметьте нужные пункты фильтрации напротив опции «Список полей, участвующих в меню фильтрации»

3) Убедитесь в отключенной опции «Дублировать фильтры товаров в адресной строке»


Особенность работы при сортировке: для каждого указанного фильтра сортировка происходит отдельно, а не глобально, как должно было быть.
Это происходит потому, что для каждого фильтра через пхп-скрипт делается запрос к юкозу, с указанными сортировками и ценами, а после все товары складыватся и выводятся. То есть, например, в фильтре "Наименование" указав "Новые очки" и "Перчатки" и сортировку по наименованию, то сначала будут выбраны все товары "Новые очки" с сортировкой по имени, затем "Перчатки" с сортировкой по имени, и результат затем просто комбинируется в xml-ответ браузеру.

Стилизация некоторых элементов.

В том случае, если вы желаете стилизовать тот или иной элемент, откройте файл style.css который расположен в папке «multifilter» на FTP PHP.

Будьте крайне внимательны при редактировании этого файла, в нем присутствуют условия вида <?php if ($shop->config['sliderPrice']) { ?>, с помощью которых выводятся нужные элементы в соответствие с заданными настройками в конфиг-файле config.php. Подобные конструкции сделаны для того, чтобы оптимизировать сам скрипт для быстрой загрузки.
Также обращаем ваше внимание на то, что к каждому классу указаны комментарии, которые содержат информацию о том, что стилизует указанный класс и\или к чему обращается.

Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.